<template>
	<view class="np-container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
		 @emptyclick="downCallback">
			<fav-item :goodsList="goods"></fav-item>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import favItem from './components/favItem.vue'
	let loading = false;
	export default {
		mixins: [MescrollMixin],
		components: {favItem},
		data() {
			return {
				downOption: {
					native: true
				},
				upOption: {
					noMoreSize: 4,
					empty: {
						tip: '~ 您还没有收藏商品 ~'
					}
				},
				goods: [], //列表数据

			}
		},
		methods: {
			upCallback(page) {
				if (loading) {
					this.mescroll.setPageNum(page.num);
					return;
				}
				loading = true;
				this.$http.get('api/user/fav', {
					params: {
						page: page.num
					}
				}).then((res) => {
					loading = false;
					let hasMore = res.list.length < 10 ? false : true;
					this.goods = this.goods.concat(res.list);
					setTimeout(() => {
						this.mescroll.endSuccess(res.list.length, hasMore);
					}, 1000);
				}).catch((error) => {
					loading = false;
					this.mescroll.endErr();
				});
			},
		}
	}
</script>

<style>
	.np-container {
		width: 100%;
		padding: 20rpx 10rpx;
	}

	.np-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.np-product-container {
		flex: 1;
		margin-right: 10rpx;
	}

	.np-product-container:last-child {
		margin-right: 0;
	}

	.np-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.np-image {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.np-pro-img {
		width: 100%;
		display: block;
	}

	.np-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.np-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.np-title {
		margin-left: 8rpx;
	}
</style>
